<!--{template lyear:header_simple_start}-->
<style>
	.app_default_list{
		padding:0;
		margin:0;
	}
	.app_default_list li{
		margin: 5px;
		list-style: none;
		float: left;
		padding: 2px; 
		vertical-align: middle;
		cursor: pointer;
		position: relative; 
		width:150px;
		height:38px;
		line-height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border:1px solid transparent;
	
	}
	.app_default_list li a{padding:2px;}
	.app_default_list li.isdefault1 a{color:rgba(76, 137, 251, 1)}
	.app_default_list li .label-rightimg{margin:auto;display: none;position:absolute;right:3px;top:3px}
	.app_default_list li.isdefault1 .label-rightimg{display: inline-block;width: auto} 
	.app_default_list li.isdefault,.app_default_list li.isdefault1{ 
		border: 1px solid rgba(76, 137, 251, 1); 
		border-radius: 5px;
	}
	.table td img{max-height: 32px;max-width: 32px;}
	.app_default_list li.ui-state-default{width: 150px;height: 38px;border: 1px solid #e1e1e1;display: block;background:#FFF }
	
</style>
<!--{template lyear:header_simple_end}-->
<main class="bs-main-container">
	<div class="container-fluid">
	  <div class="card">
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-hover align-middle">
					<thead>
						<tr>
							<th>{lang default}</th> 
							<th>{lang application_name}</th>
						</tr>
					</thead>
					<!--{loop $list $key $value}-->
					<tr>  
						<td>
							<a class="btn btn-outline-success" href="{MOD_URL}&op=extopen&ext=$key">$key</a>
						</td>
						<td>
							<form name="appform" class="form-horizontal form-horizontal-left" action="{MOD_URL}&op=extopen" method="post">
							<input type="hidden" name="do" value="setorder" /> 
							<ul class="app_default_list clearfix">
							<!--{loop $value $key2 $value2}-->
								<li class="default_li isdefault{$value2[isdefault]}" title="{lang drag_can_be_sorted}"  onclick="setdefault(this, '{$value2[extid]}' )">
									<input class="form-control"  name="extid[]" type="hidden" value="{$value2[extid]}" />
									<img class="default_li_icon" src="$value2[appdata][appico]" /><a  href="javascript:;" title="{lang set_default}">$value2[appdata][appname]</a>
									<img src="static/image/common/ic-filtrate.png" class="label-rightimg">
								</li>
							<!--{/loop}-->
							</ul>
							</form>
						</td>
					</tr>
					<!--{/loop}-->
					<thead>
						<tr>
							<td colspan="2" align="center" style="border:none">$multi </td>
						</tr> 
					</thead>
				</table>
			</div>
			<div class="mt-2 alert alert-warning alert-dismissible fade show" role="alert">
				<strong>{lang board_message}</strong> {lang extopen_board_message_text}
				<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
			</div>
	</div>
</div>
</div>
</main>
<script type="text/javascript" src="{MOD_PATH}/scripts/jquery-ui.js?{VERHASH}"></script>
<script type="text/javascript">
	jQuery('.app_default_list li').hover(function(){
		jQuery(this).addClass("isdefault");
	},function(){
		jQuery(this).removeClass("isdefault");
	});
	
	$( ".app_default_list" ).sortable({
		items: ".default_li ",
		placeholder: "ui-state-default", 
		update: function(event, ui) { 
			var form = jQuery(this).parent();
			jQuery.post(form.action, jQuery(form).serialize(), function(json) {
				if(json.status==1){
					showmessage(json.info,'success',1000,1); 
				} else{
					showmessage(json.info,'error',1000,1);
				}
			}); 
		}
    }); 
	
	function setdefault(obj,extid ){
		if( jQuery(obj).hasClass("isdefault1") ){
			return false;
		}
		jQuery.ajax({
			type:'post',
			url:'{MOD_URL}&op=extopen',
			data:{'extid':extid ,'do':'setdefault'},
			success:function(json){
				if(json.status==1){
					showmessage( json.info,'success',1000,1);
					jQuery(obj).siblings().removeClass("isdefault1");
					jQuery(obj).addClass("isdefault1");
				} else{
					showmessage(json.info,'error',1000,1);
				}
			},
			error: function(xhr, status, error) {
				showmessage('Request failed:' + status +' ' +error, 'error', 3000, 1);
			}
		}); 
	}
	function check_default(obj) {
		if(jQuery(obj).prop('checked')) {
			jQuery('input[data-ext=' + jQuery(obj).data('ext') + ']').not(obj).prop('checked', false);
		}
	}
</script>
<!--{template lyear:footer_simple}-->